<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>View UI Plus example</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
    <script type="text/javascript" src="https://unpkg.com/vue@next"></script>
    <script type="text/javascript" src="https://unpkg.com/view-ui-plus"></script>
    <script src="/jeecg-boot/js/jquery-1.8.3.min.js"></script>
</head>
<body style="background: rgb(238, 238, 238)">
<div id="app" style="display: flex;flex-direction: column;align-items: center;">
    <div style="background:#eee;padding: 20px">
        <Card :bordered="false" style="max-width: 650px;width: calc(100vw - 40px)">
            <template #title style="border-left: 10px solid rgb(25, 190, 107);">AI Chat</template>
            <div style="height: calc(100vh - 244px);overflow: auto;padding-bottom: 10px;" ref="chatbody">
                <Card v-for="item in content" style="margin-top:10px" :style="{background:item.type=='AI'?'#19be6b':''}">
                    <div v-if="item.type=='我'">
                        {{item.type}}:<br/>
                        {{item.text}}
                    </div>
                    <div v-else style="color:#fff;">
                        {{item.type}}:<br/>
                        {{item.text}}
                    </div>
                </Card>

                <Skeleton
                        animated
                        style="margin-top: 10px"
                        :loading="loading"
                        :title="false"
<#--                        :paragraph="{ rows: 5, width: [ '50%', '62%'] }"-->
                />

<#--                <Card style="margin-top:10px">-->
<#--                    <div>-->
<#--                        AI:<br/>-->
<#--                        123123-->
<#--                    </div>-->
<#--                </Card>-->
            </div>
        </Card>
        <Card style="margin-top:10px;max-width: 650px;width: calc(100vw - 40px)">
            <div>
                <i-input @keydown.enter="commit" v-model="inputText" maxlength="500" show-word-limit type="textarea" placeholder="Enter something..." style="width: 100%" />
            </div>
            <i-button type="success" long style="margin-top: 5px;" @click="commit">SUBMIT</i-button>
        </Card>
    </div>
</div>
<script>
    const app = Vue.createApp({
        data () {
            return {
                inputText:'',
                visible: false,
                content:[],
                loading:false,
            }
        },
        methods: {
            handleScrollBottom() {
                this.$nextTick(() => {
                    let scrollElem = this.$refs.chatbody;
                    scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
                });
            },
            commit(){
                this.content.push({type:'我',text:this.inputText});
                var inputs ="下面是一段与AI的对话\n";
                this.content.forEach(i=>{
                    inputs+=i.type+':'+i.text+"\n";
                })

                inputs+="AI:"
                this.handleScrollBottom();
                this.inputText = '';
                var that = this;
                this.loading = true;
                $.ajax({

                    type : "POST",

                    url : "/jeecg-boot/view/openAi/inputChat",

                    data : JSON.stringify({input:inputs}),

                    contentType : "application/json",

                    dataType : "json",

                    complete:function(msg) {
                        that.loading = false;
                        var rp = JSON.parse(msg.responseText);
                        if(rp.success){
                            rp.result.forEach(i=>{
                                that.content.push({type:'AI',text:i});
                            })
                            that.$nextTick(()=>{
                                that.handleScrollBottom()
                            })
                        }
                    }

                });

            },
        }
    });
    app.use(ViewUIPlus);
    app.mount("#app");
</script>
</body>
</html>